import { observer } from 'mobx-react'
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {
    Form,
    Input,
    Button,
    Radio,
    Card,
    message,
    Affix
} from 'antd'

const { TextArea } = Input

// 表单的字段类型示例
interface formValues {
    dictType: string
    dictId: string
    name: string
    description?: string
}
const AddDict: React.FC = () => {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const [loading, setLoading] = useState(false)

    // 提交表单
    const onFinish = async (values: formValues) => {
        console.log('提交数据: ', values)
        try {
          setLoading(true)
          console.log('提交的值:', values)
          // TODO: 调用添加接口
          message.success('添加成功')
          navigate('/setting/dictMg')
        } catch (error) {
          message.error('添加失败')
        } finally {
          setLoading(false)
        }
    }

    return (
        <div className="add-app-detail">
            <div className="basic-info">
                <div className="title">基本信息</div>
                <Form
                    form={form}
                    onFinish={onFinish}
                    labelCol={{ span: 4 }}
                    variant={'filled'}
                >
                    <Form.Item
                        label="字典类型"
                        name="dictType"
                        rules={[{ required: true, message: '请选择字典类型' }]}
                        initialValue="1"
                    >
                        <Radio.Group>
                            <Radio value="1">系统类</Radio>
                            <Radio value="2">业务类</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="字典标识"
                        name="dictId"
                        rules={[{ required: true, message: '请输入字典标识' }]}
                    >
                        <Input placeholder="请输入字典标识" />
                    </Form.Item>
                    <Form.Item
                        label="字典名称"
                        name="name"
                        rules={[{ required: true, message: '请输入字典名称' }]}
                    >
                        <Input placeholder="请输入字典名称" />
                    </Form.Item>

                    <Form.Item
                        label="描述"
                        name="description"
                    >
                        <TextArea rows={4} placeholder="请输入描述，最多不超过200字。" maxLength={200} />
                    </Form.Item>
                    <div className="form-actions">
                        <Button type="primary" htmlType="submit" loading={loading}>
                            保存
                        </Button>
                        <Button onClick={() => navigate(-1)}>
                            返回
                        </Button>
                    </div>
                </Form>
            </div>
        </div>
    )
}

export default observer(AddDict)
